<!DOCTYPE html>
<html lang="en-us" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: header"></head>
<body class="gray-bg">
<style type="text/css">
	h1.logo-name {
		font-size: 100px;
	}
	.logo-name{
		letter-spacing:0px;
	}
</style>
<script>if(window.top !== window.self){ window.top.location = window.location;}</script>

<div class="middle-box text-center loginscreen  animated fadeInDown">
	<div>
		<div>

			<h1 class="logo-name">Storage</h1>

		</div>
		<h3>欢迎使用DTS-Ops</h3>
		<label id="password-invaild" class="error" >密码错误，请重新输入</label>

		<form class="m-t" role="form"  id="login-form">
			<div class="form-group">
				<input  class="form-control" placeholder="用户名" name="username" id = "username">
			</div>
			<div class="form-group">
				<input type="password" class="form-control" placeholder="密码" name="password" id = "password">
			</div>
			<button type="submit" class="btn btn-primary block full-width m-b">登 录</button>

		</form>
	</div>
</div>
<div th:include="common/foot :: footer"></div>
<script type="text/javascript">
    //runAllForms();
    $(function() {
        $("#password-invaild").hide();
        var e = "<i class='fa fa-times-circle'></i> ";
        $("#login-form").validate({
            rules: {
                username: "required",
                password: {required:!0, minlength: 3,maxlength:20}
            },
            messages: {
                username: e+ "请输入用户名",
                password: {required:e+"请输入密码",minlength:e+"密码必须3个字符以上",maxlength:e+"密码必须20个字符以下"}
            },
            submitHandler: function (form) {
                $.ajax({
                    type : "POST",
                    url : "/signin",
                    data : $('#login-form').serialize(),
                    success : function(result) {
                        window.location = '/index';
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        $("#password-invaild").show();
                    }
                });
            }
        });
    });
</script>
</body>

</html>